<template>
	<view class="content">
		<view class="borde-padd-24">
			<view class="my-title">我的模板(3)</view>
			<view class="list-conter flex-line-height active" v-for="item in 5">
				<image class="icon-conter" :src="imgUrl+'/logo.png'" mode=""></image>
				<view class="fexl-conter">
					<view class="title">默认模板</view>
					<view class="size">3925人使用此模板</view>
				</view>
			</view>
			<view class="my-title">为你推荐精品模板</view>
			<view class="myResume-list flex-line-height">
				<image class="conter-left" :src="imgUrl+'/logo.png'" mode=""></image>
				<view class="myResume-list-right">
					<view class="title">极简风高端简历模板</view>
					<view class="sub-title">3925人使用此模板</view>
					<view class="flex-height-between flex-line-height">
						<view class="flex money">
						    <text>¥</text>	36.9
						</view>
						<view class="goumai">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				imgUrl:this.imgUrl,
			}
		}
	}
</script>

<style scoped>
	.my-title{
		padding-top: 40rpx;
		padding-bottom: 16rpx;
	}
	.list-conter{
		height: 146rpx;
		margin-bottom: 16rpx;
		background: #FFFFFF;
		padding: 24rpx;
		position: relative;
		box-sizing: border-box;
		border: 4rpx solid #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.list-conter .icon-conter{
		width: 73rpx;
		height: 98rpx;
		margin-right: 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.fexl-conter .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.fexl-conter .size{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.list-conter.active{
		border: 4rpx solid #4061E4;
	}
	.list-conter.active::after{
		/* conter.png */
		content: '';
		position: absolute;
		right: -4rpx;
		top: -4rpx;
		width: 40rpx;
		height: 40rpx;
		background-image: url('../../static/conter.png');
		background-size: 100% 100%;
	}
	.myResume-list{
		height: 220rpx;
		background: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
		
	.myResume-list .imgaes{
		width: 128rpx;
		height: 172rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.conter-left{
		width: 128rpx;
		height: 172rpx;
		margin-right: 32rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.myResume-list-right .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
	}
	.myResume-list-right .sub-title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		margin-bottom: 19rpx;
		color: #8F9294;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.myResume-list-right{
		width: 500rpx;
	}
	.myResume-list-right .money{
		font-family: MiSans, MiSans;
		font-weight: 600;
		font-size: 32rpx;
		color: #E26262;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.myResume-list-right .goumai{
		width: 160rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
		font-style: normal;
		text-transform: none;
		height: 56rpx;
		background: #3B5EEC;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
</style>